<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>全局组件</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <input type="text" v-model="ups" />
      <ul>
        <firsttemple
          v-for="(bk,index) in books"
          :key="index"
          :book="bk"
          :up="ups"
        ></firsttemple>
      </ul>
    </div>

    <script>
      Vue.component("firsttemple", {
        props: ["book", "up"],
        template: "<li>{{book.name | bookNameUpperCase}} {{up}} </li> ",
        filters: {
          bookNameUpperCase: function (value) {
            this.up = "null";

            return value.toUpperCase();
          },
        },
        watch: {
          up: {
            handler(val) {
              console.log(val);
            },
          },
        },
      });
      new Vue({
        el: "#app",
        data: {
          ups: "false",
          books: [
            {
              name: "java a 从入门到放弃",
            },
            {
              name: "Python从入门到放弃",
            },
            {
              name: "vue从入门到放弃",
            },
            {
              name: "C#从入门到放弃",
            },
            {
              name: "Mysql从入门到跑路",
            },
          ],
        },
      });
    </script>
  </body>
</html>
